<%@ page import="org.jeecgframework.web.util.StaticValue" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html >
<html>
<head>
    <title>巡检进度报告</title>
    <t:base type="jquery,easyui,tools,echarts"></t:base>
    <style>
        .chart-container {
            width: 100%;
        }

        .search-bar {
            height: 40px;
            width: 80%;
            margin: 0 auto;
        }

        .search-bar .condition {
            width: 90%;
            float: left;
        }

        .search-bar div:last-child {
            width: 10%;
            float: right;
            text-align: right;
        }

        .search-bar span {
            padding-right: 10px;
        }

        .search-bar span select {
            height: 24px !important;
        }

        .search-bar .search-btn {
            float: right;
            width: 10%;
            text-align: center;
            line-height: 40px;
        }

        #chart {
            width: 80%;
            height: 600px;
            margin: -5px auto
        }
        .chart-container{
            margin: 0 auto;
        }
        .chart-container>div{
            padding:20px 0;
            min-width: 340px;
        }
        .chart-container>div:first-child{
            border-top:none;
            border-left:none;
            border-right : 1px solid gray;
            border-bottom : 1px solid gray;

        }
        .chart-container>div:last-child{
            border-top:1px solid gray;
            border-left:1px solid gray;
            border-right : none;
            border-bottom : none;
            margin-top:-2px;
            margin-left:-4px;

        }
    </style>
</head>
<body>
<div class="chart-container">
    <div id="chartGuava" style="height: 300px;width: 46%;display: inline-block;"></div>
    <div id="chart2" style="height: 300px;width: 46%;display: inline-block;"></div>
    <div id="pieChart" style="height: 300px;width:46%;display: inline-block;"></div>
    <div id="chartEvl" style="height: 300px;width:46%;display: inline-block;"></div>
</div>
<span style="display: block;font-size:14px;color:#6d6d6d;margin-left:30px;width:425px;">注：由于数据收集整理原因，图表数据会有一定延时，还请谅解</span>
<script type="text/javascript">
    $(function(){
        $("#chartGuava").click(function(){
            addOneTab('综合报告', 'chainReportController.do?index', '');
        });
        $("#chartEvl").click(function(){
            addOneTab('巡检评价报告', 'chainReportController.do?evaluate', '');
        });
        $("#chart2").click(function(){
            addOneTab('巡检进度报告', 'zyIpReportXXController.do.do?ipReportA', '');
        });
        $("#pieChart").click(function(){
            addOneTab('巡检异常报告', 'zyIpReportXXController.do?ipReportB', '');
        })
    })
	var myChart2 = echarts.init(document.getElementById('chart2'));
	var pieChart = echarts.init(document.getElementById('pieChart'));//饼 柱
	$.getJSON("zyIpReportXXController.do?queryIpReportAData&year=2019", function (data) {
		if (!$.isEmptyObject(data)) {
			var lt =[], dt = {};
			$(data.planEachMonth).each(function(i,item){
				dt = {}
				dt.value = item;
				dt.itemStyle = {
					normal :{
						color : '#2F4554'
					}
				}
				lt.push(dt);
			});
			bar2option.series[0].data = lt;
			bar2option.series[1].data = data.completeEachMonth;
			myChart2.setOption(bar2option);
		}
	})
	$.getJSON("zyIpReportXXController.do?queryIpReportBPieChartData&year=2019", function (data) {
		if (!$.isEmptyObject(data)) {
			pieOption.options[0].series[0].data = data.exCountList;
			pieOption.options[0].series[1].data = [
				{
					name : '异常数量',
					value : data.exCount 
				},{
					name : '正常数量',
					value : data.total 
				}
			];
		}
		pieChart.setOption(pieOption);
	});
	bar2option = {
		title: {
	        text: '巡检进度报告'
	    },
	    color: ['#3398DB'],
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
        grid: {
            top: 40,
            bottom: 20
        },
	    xAxis : [
	        {
	            type : 'category',
	            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
	            axisTick: {
	                alignWithLabel: true
	            }
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'计划',
	            type:'bar',
	            data:[]
	        },
	        {
	            name: '完成',
	            type: 'bar',
	            data: []
	        }
	    ]
	};
	
	pieOption = {
		    baseOption: {
				title: {
			        text: '巡检异常报告'
			    },
		        timeline: {
		            show:false
		        },
		        tooltip: {
		            trigger: 'item',
		            formatter: "{b}: {c}"
		        },
		        calculable : true,
		        grid: {
		            top: 40,
		            bottom: 20
		        },
		        xAxis: [
		            {
		                'axisLabel':{'interval':0},
		                data: ['亮度', '温度', '湿度', '三相电压', '单相电压', '零地电压'],
		                splitLine: {show: false}
		            }
		        ],
		        yAxis: [
		            {
		                type: 'value'
		            }
		        ],
		        series: [
		            {name: '', type: 'bar'},
		            {
		                name: '异常占比',
		                type: 'pie',
		                center: ['75%', '35%'],
		                radius: '28%'
		            }
		        ]
		    },
		    options: [
		        {
		            series: [
		                     {barWidth: '30%',data: []},
		                     {data: []}
		                 ]
		        }
		    ]
		};

    var myChartGuava = echarts.init(document.getElementById('chartGuava'));
    var centerRadios = "80%";
    var sideRadios = "50%";
    var rightRadios = "50%";
    var sideWidth = 10;
    var centerWidth = 12;
    var optionGuava = {
        title:{
            text : '综合报告',
            show : true
        },
        tooltip: {
            formatter: "{b} <br/>{c}"
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                restore: {show: false},
                saveAsImage: {show: false}
            }
        },
        series: [
            {
                name: '满意度评分',
                type: 'gauge',
                center: ['17%', '55%'],    // 默认全局居中
                radius: sideRadios,
                min: 3.5,
                max: 5,
                endAngle: 45,
                splitNumber: 3,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: sideWidth,
                        color:[[0.33,'#C23531'],[0.86,'#63869E'],[1,'#91C7AE']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length:12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length:20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    show:false
                },

                detail: {
                    //backgroundColor: 'rgba(30,144,255,0.8)',
                    // borderWidth: 1,
                    borderColor: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5,
                    width: 80,
                    height: 30,
                    offsetCenter: [25, '20%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        color: '#fff'
                    }
                }
            },
            {
                name: '影院环境评分',
                type: 'gauge',
                min: 0,
                max: 100,
                radius: centerRadios,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: centerWidth,
                        color:[[0.7,'#C23531'],[0.8,'#63869E'],[1,'#91C7AE']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title : {
                    show:false
                },
                pointer: {           // 分隔线
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 5
                },
                detail: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                }
            },
            {
                name: '巡检后',
                type: 'gauge',
                center: ['82%', '50%'],    // 默认全局居中
                radius: rightRadios,
                min: 0,
                max: 28,
                startAngle: 135,
                endAngle: 45,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: sideWidth,
                        color:[[0.38,'#C23531'],[0.62,'#63869E'],[1,'#C23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 5,
                    length: 10,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    formatter:function(v){
                        switch (v + '') {
                            case '0' : return '0';
                            case '14' : return '14FL';
                            case '28' : return '28';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title : {
                    show: false
                },
                detail : {
                    show: false
                }
            },
            {
                name: '巡检前',
                type: 'gauge',
                center : ['82%', '50%'],    // 默认全局居中
                radius : rightRadios,
                min: 0,
                max: 28,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: sideWidth,
                        color:[[0.38,'#C23531'],[0.62,'#63869E'],[1,'#C23531']]
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {
                    formatter:function(v){
                        switch (v + '') {
                            case '28' : return '28';
                            case '14' : return '14FL';
                            case '0' : return '0';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChartGuava.setOption(optionGuava);

    var myChartEvl = echarts.init(document.getElementById('chartEvl'));


    var indi = [
        {name: '服务', min:4,max: 5},
        {name: '沟通', min:4,max: 5},
        {name: '巡检效果', min:4,max: 5},
        {name: '培训', min:4,max: 5},
        {name: '技能', min:4,max: 5}
    ];

    optionEvl = {
//        backgroundColor: '#161627',
        title:{
            text : '巡检评价报告',
            show : true
        },
        tooltip: {
            formatter: function(a,b,c){
                var txt = "巡检评分<br/>";
                for(var i = 0 ;i<a.value.length;i++){
                    txt += Number(a.value[i]).toFixed(2)+",";
                }
                return txt.substr(0,txt.length-1);
            }
        },

        radar: {
            indicator: indi,
            shape: 'circle',
            axisLabel: {
                show: true,
                inside: true,
                formatter: function (value, index) {
                    if (index === 0) {
                        return '';
                    }
                    return value;
                }
            },
            name: {
                textStyle: {
                    color: 'black',
                    fontSize:14
                }
            }
        },
        series: [
            {
                name:'巡检满意度',
                type: 'radar',
                tooltip: {
                    formatter : function(param){
                        var txt = param.seriesName+"<br/>";
                        for(var i = 0;i<indi.length;i++){
                            txt += indi[i].name+":"+Number(param.data[i]).toFixed(1)+"<br/>"
                        }
                        return txt;
                    }
                },
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                areaStyle: {
                    normal: {
                        opacity: 0.4
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChartEvl.setOption(optionEvl);

    $.getJSON("chainReportController.do?drawGauge" , {year:2019}, function (data) {
        if (!$.isEmptyObject(data)) {
            if (data.avg400 != undefined) {
                optionGuava.series[0].data = [{value: data.avg400.score,name:'满意度评分'}];
            }
            if (data.avgData != undefined && data.avgSumData != undefined) {
                optionGuava.series[1].data = [{
                    value:data.avgData.scoreBefore,name:'院线环境均分'
                },{
                    value: data.avgSumData.scoreBefore,
                    itemStyle:{
                        normal:{
                            color:"#006400"
                        }
                    },
                    name:'全国环境均分'
                }];
                optionGuava.series[2].data = [{value: data.avgData.flBefore,name:'巡检后'}];
                optionGuava.series[3].data = [{value: data.avgData.flAfter,name:'巡检前'}];
            }

        }
        myChartGuava.setOption(optionGuava);

    })

    $.getJSON("chainReportController.do?drawRadaEvaluate&year=19" , {}, function (data) {
        if (!$.isEmptyObject(data)) {
            try{
                optionEvl.series[0].data = [data.results];
            }catch(e){

            }
        }
        myChartEvl.setOption(optionEvl);
    })
</script>
</body>
</html>
